<template>
  <div class="header-container">
    <div class="header-left flex-box">
      <el-icon class="icon" :size="20" @click="store.commit('collapseMenu', '')">
        <!-- vueX用 实例加.commit() 触发里面 '写要用的函数','还可以写需要传递的参数' 是store里的 -->
        <Fold />
      </el-icon>
      <!-- 要实现的效果：点击X 在中间或者第一个页面都跳转到后面的页面，只有一个页面x就到根页面 -->
      <ul class="flex-box">
        <li v-for="(item, index) in selectMenu" 
          :key="item.path" 
          class="tab flex-box"
          :class="{active: item.path == route.path}"
        >
          <el-icon size="16">
            <component :is="item.icon"></component>
          </el-icon>
            <router-link class="text flex-box" :to="{path: item.path}">{{ item.name }}</router-link>
          <el-icon size="20" class="close" @click="closeTab(item ,index)">
            <Close />
          </el-icon>
        </li>
      </ul>
    </div>
    <div class="header-admin flex-box">
      <div>
        <!-- <el-avatar :icon="UserFilled" /> -->
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </div>
      <div>
        <el-dropdown @command="handleClick">
          <div class="el-dropdown-link flex-box">
            管理员
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="cancel">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>
  </div>
  <div>
    <!-- <iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1056430431&bvid=BV1DH4y1c7TQ&cid=1630474338&p=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> -->
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
import { useRoute, RouterLink ,useRouter } from 'vue-router'
import { computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'


// 拿到route路由对象，咩有r
const route = useRoute()
// 拿到store实例
const store = useStore()
// router.push(item.meta.path)

const router = useRouter()

const selectMenu = computed(() => store.state.menu.selectMenu)
console.log(selectMenu, 'selectMenu')

// 关闭标签
const closeTab = (item ,index)=>{
  store.commit('closeMenu',item)
  // 删除的非当前页tag
  if(route.path != item.path){
    return
  }
  const selectMenuData = selectMenu.value
  // 删除的最后一项
  /*
  if(index == selectMenuData.length - 1){
    // 如果tag只有一个元素，那就跳转首页
    if( !selectMenuData.length){
      router.push('/')
    } else {
      // 如果不是最后一个，就拿到前面一项的router的path 跳转 过去
      router.push({
        path: selectMenuData[index-1].path
      }) 
    }
  } else {
    // 如果删除的不是最后一项，就拿到后面一项的router的path 跳转到后一个
    router.push({
      path: selectMenuData[index+1].path
    })
  }
  */
// 删除当前tag时
  if(selectMenuData.length === 0) {
    router.push('/')
  } else if(index === selectMenuData.length) {
    // 如果删除的是最后一项，就拿到前面一项的router的path 跳转 过去 
    router.push({
      path: selectMenuData[index-1].path  
    })
  } else {
    // 如果删除的不是最后一项，就拿到后面一项的router的path 跳转到后一个
    router.push({
      path: selectMenuData[index].path
    })
  }
}


// 退出登录
const handleClick = (command: string | number | object)=>{
  ElMessage(`现在 ${command}`)
  if(command === 'cancel') {
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pz_v3pzxxx')


    window.location.href = window.location.origin + '/#/login'
    router.push('/login');
  }
}


</script>

<style scoped lang="less">
.flex-box {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  // background-color: antiquewhite;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.1);

  padding-right: 25px;

  .header-left {
    height: 100%;

    // .icon {
    //   width: 60px;
    //   height: 100%;
    // }

    .icon:hover {
      background-color: #ccc;
      cursor: pointer;
    }

   .tab {
     padding: 0 10px;
     height: 100%;

    .text {
      margin: 0 5px;
    }
    .close {
      visibility: hidden;
    }
    &.active {
      background-color: #f5f5f5;
      a {
        color: #409eff;
      }
      i {
        // visibility: visible;
        color: #409eff;
      }
    }
   }
   .tab:hover {
      background-color: #f5f5f5;
      cursor: pointer;
      .close {
      visibility: inherit;
      cursor: pointer;
      color: #333;
    }
    }

  }
  a {
    height: 100%;
    // line-height: 60px;
    color: #333;
    font-size: 15px;
    text-decoration: none;
  }

}
</style>